<template>
	<view class="contenet">
		<view class="shanshuo">
		</view>
		<view class="shanshuo" style="left: 10%;top: 10%;animation-delay:1s">
		</view>
		<view class="shanshuo" style="left: 20%;top: 20%;animation-delay:3s">
		</view>
		<view class="shanshuo" style="left: 30%;top: 14%;animation-delay:3.3s">
		</view>
		<view class="shanshuo" style="left: 50%;top: 18%;animation-delay:1.8s">
		</view>
		<view class="shanshuo" style="left: 80%;top: 12%;animation-delay:3.2s">
		</view>
		<view class="shanshuo" style="left: 60%;top: 15%;animation-delay:2.7s">
		</view>
		<view class="shanshuo" style="left: 40%;top: 9%;animation-delay:1.6s">
		</view>
		<view class="shanshuo" style="left: 90%;top: 5%;animation-delay:2.1s">
		</view>
		<view class="shanshuo" style="left: 70%;top: 18%;animation-delay:3.6s">
		</view>
		<view class="liuxing">
		</view>
		<view class="liuxing" style="right:10%;animation-delay:1s">
		</view>
		<view class="liuxing" style="right:20%;animation-delay:2s">
		</view>
		<view class="liuxing" style="right:30%;animation-delay:3.5s">
		</view>
		<view class="liuxing" style="right:50%;animation-delay:4s">
		</view>
		<view class="liuxing" style="right:70%;animation-delay:2.4s">
		</view>
		<view class="liuxing" style="right:80%;animation-delay:1.6s">
		</view>
		<view class="lotitle">
			登录
		</view>
		<view class="forms">

			<el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
				<el-form-item label="账户" prop="username">
					<el-input v-model="form.username"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input v-model="form.password"></el-input>
				</el-form-item>
				<el-form-item>
					<el-row type="flex" justify="center">
						<el-col :span="6">
							<el-button v-loading="loading" type="primary" @click="submitForm('form')">登录</el-button>
							</div>
						</el-col>
						<el-col :span="6">
							<el-button type="warning" @click="resetForm('form')">重置</el-button>
							</div>
						</el-col>
					</el-row>
				</el-form-item>
			</el-form>
			<transition name="el-zoom-in-center">
			<view class="texterro" v-show="show1">
				密码错误6次，将禁止登陆1小时！
			</view>
			 </transition>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1:false,
				loading: false,
				form: {
					username: '',
					password: '',
				},
				rules: {
					username: [{
							required: true,
							message: '请填写账户',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 12,
							message: '长度在 3 到 12 个字符',
							trigger: 'blur'
						}
					],
					password: [{
							required: true,
							message: '请填写密码',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 12,
							message: '长度在 3 到 12 个字符',
							trigger: 'blur'
						}
					],
				}
			}
		},
		onLoad() {},
		methods: {
			submitForm(formName) {
				this.loading = true
				this.$refs[formName].validate((valid) => {
					if (valid) {

						uniCloud.callFunction({
							name: 'login',
							data: {
								username: this.form.username,
								password: this.form.password
							},
							success: (res) => {
								if (res.result.code === 0) {
									console.log(res.result);
									uni.setStorageSync('uni_id_token', res.result.token)
									uni.setStorageSync('uni_id', res.result.uid)
									uni.setStorageSync('uni_id_token_expired', res.result.tokenExpired)
									this.$message.success('登录成功！')
									uni.switchTab({
									    url: '/pages/home/home'
									});
									this.loading = false
								} else {
									if(res.result.errCode==='uni-id-password-error'){
										this.show1=true
									}
									this.$message.error(res.result.message)
									this.loading = false
								}
							}
						})
					} else {
						this.loading = false
						this.$message.error('请正确填写表单')
						return false;
					}
				});
			},
			resetForm(formName) {
				this.$refs[formName].resetFields();
			}
		}
	}
</script>

<style lang="scss">
	@function toVw($a) {
		@return ($a/15.36)+vw;
	}

	.forms {
		width: toVw(400);
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

	}

	.contenet {
		overflow: hidden;
		background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
		height: 100vh;
	}

	.direction {
		font-size: toVw(18);
		color: #fff;
		padding-top: toVw(100);
		padding-left: toVw(40);
		background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}

	.lotitle {
		font-size: toVw(28);
		color: #fff;
		font-weight: bold;
		padding-top: toVw(80);
		padding-right: toVw(100);
		text-align: right;
		text-shadow: 0 0 toVw(10) #fff, 0 0 toVw(40) #fff, 0 0 toVw(60) #fff, ;
	}

	.liuxing {
		position: absolute;
		top: toVw(-10);
		right: toVw(20);
		width: toVw(2);
		height: toVw(2);
		transform: rotateZ(45deg) translateY(0px);
		background-image: linear-gradient(to top, #ffffff 0%, transparent 100%);
		animation: identifier 5s ease infinite;
	}

	@keyframes identifier {
		0% {
			height: toVw(2);
			transform: rotateZ(45deg) translateY(toVw(-100));
		}

		100% {
			height: toVw(100);
			transform: rotateZ(45deg) translateY(toVw(600));
			opacity: 0;
		}
	}

	.shanshuo {
		position: absolute;
		top: toVw(10);
		left: toVw(20);
		width: toVw(1);
		height: toVw(1);
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 0 toVw(10) toVw(5) #fff;
		animation: shanshuo 3s infinite;
	}

	@keyframes shanshuo {
		0% {
			box-shadow: 0 0 0px 0px #fff;
		}

		50% {
			box-shadow: 0 0 8px 5px #fff;
		}

		100% {
			box-shadow: 0 0 0px 0px #fff;
		}
	}

	/deep/ .el-form-item__label {
		color: #fff !important;
	}

	/deep/.el-form-item__error {
		color: #fff !important;
	}
	.texterro{
		text-align: right;
		margin: auto;
		background: -webkit-linear-gradient(left,
		            #ffffff,
		            #ff0000 6.25%,
		            #ff7d00 12.5%,
		            #ffff00 18.75%,
		            #00ff00 25%,
		            #00ffff 31.25%,
		            #0000ff 37.5%,
		            #ff00ff 43.75%,
		            #ffff00 50%,
		            #ff0000 56.25%,
		            #ff7d00 62.5%,
		            #ffff00 68.75%,
		            #00ff00 75%,
		            #00ffff 81.25%,
		            #0000ff 87.5%,
		            #ff00ff 93.75%,
		            #ffff00 100%);
		        -webkit-background-clip: text;
		        -webkit-text-fill-color: transparent;
		        background-size: 200% 100%;
		        animation: masked-animation 2s infinite linear;
	}
	@keyframes masked-animation {
	        0% {
	            background-position: 0 0;
	        }
	        100% {
	            background-position: -100%, 0;
	        }
	    }

</style>
